<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<link href="./css/reset.css" rel="stylesheet" type="text/css">
<link href="./css/classify.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="near-box">
	<div class="yx-index-top">
	  	 <div class="index-top-box2">
	  	 	 <span class="fresh-toptext1">派送至：北京石景山</span>
	  	 	 <span class="fresh-topimg1"></span>
	  	 </div>
	  	 <div class="index-top-box1">
	  	 	<span class="index-top-img1"><img src="./images/search3.png" alt=""></span>
	  	 </div>
	  </div>
	<div class="classify-bigbox">
	    <div class="classify-left">
	    	<div class="classify-perch"></div>
	    	<span class="classify-text pitch-on">热销新品</span>
	    	<span class="classify-text">优选水果</span>
	    	<span class="classify-text">卤味熟食</span>
	    	<span class="classify-text">牛奶面包</span>
	    	<span class="classify-text">热饮</span>
	    	<span class="classify-text">冰淇淋</span>
	    	<span class="classify-text">饮料酒水</span>
	    	<span class="classify-text">休闲零食</span>
	    </div>
	    <div class="classify-right content2">
	    	<div class="classify-perch-r"></div>
	    	<div class="classify-right-title">
	    		<span class="classifyrt-text">综合排序</span>
	    		<span class="classifyrt-text price">按价格<i class="sort-img"></i><i class="sort-img2" style="display: none;"></i></span>
	    	</div>
	    	
	    	<!--商品列表循环-->
	    	<div id="zone">
	    	    <div class="classify-box1">
	            	<a href="./goods-details.html" class="classify-box1-img1"><img src="./del/fruits-img7.png" alt=""></a>
	            	<div class="classify-box2">
	            		<a href="./goods-details.html" class="classify-box2-text1">新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价</a>
	            		<span class="classify-box2-text2">￥10.8</span>
	            		<div class="shop-cart-box3">
			    			<span class="shop-cart-subtract"></span>
			    			<input type="tel" size="4" value="0" id="tb_count" class="shop-cart-numer">
			    			<span class="shop-cart-add"></span>
			    		</div>
	            	</div>
                </div>
	    	</div>
	    </div>
	</div>
	<!--底部-->
	<div class="kaola-bottom">
		<a href="./index.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="./images/home2.png"></span>
			<span class="kaola-bottom-text1">首页</span>
		</a>
		<a href="./classify.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="./images/search2.png"></span>
			<span class="kaola-bottom-text1 text2">分类</span>
		</a>
		<a href="./shoping-cart.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="./images/shop-cart1.png"></span>
			<span class="kaola-bottom-text1">购物车</span>
		</a>
		<a href="./personal-center.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="./images/people1.png"></span>
			<span class="kaola-bottom-text1">我的</span>
		</a>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	//切换类别
	function switab(tab, tab_c_css, no) {
		$(tab).each(function(i) {
			if(i == no) {
				$(this).addClass(tab_c_css);
			} else {
				$(this).removeClass(tab_c_css);
			}
			
			loadFruid();
		})
	}
	$(document).ready(function() {
		$(".classify-text").each(function(i) {
			$(this).click(function() {
				switab('.classify-text', 'pitch-on', i);
			})
		});
		
		//监听数量添加和减少事件
		$("#zone").on("click",".shop-cart-subtract,.shop-cart-add",function(){
			if($(this).hasClass("shop-cart-subtract")){
				var multi = 0;
				var vall = $(this).next().val();
				vall--;
				if(vall <= 0) {
					vall = 0;
				}
				$(this).next().val(vall);
			}else{
				var multi = 0;
				var vall = $(this).prev().val();
				vall++;
				$(this).prev().val(vall);
			}
		})
	});
	
	function loadFruid(){
		//发送ajax加载水果信息
		var $fruitZone = $("#zone");
		$fruitZone.empty();
		var count = parseInt(Math.random()*10);
		for(var i=0;i<count;i++){
			    var data = $('<div class="classify-box1">'+
	            	'<a href="./goods-details.html" class="classify-box1-img1"><img src="./del/fruits-img7.png" alt=""></a>'+
	            	'<div class="classify-box2">'+
	            		'<a href="./goods-details.html" class="classify-box2-text1">新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价</a>'+
	            		'<span class="classify-box2-text2">￥10.8</span>'+
	            		'<div class="shop-cart-box3">'+
	            			'<span class="shop-cart-subtract"></span>'+
			    			'<input type="tel" size="4" value="0" id="tb_count" class="shop-cart-numer">'+
			    			'<span class="shop-cart-add"></span>'+
			    		'</div>'+
	            	'</div>'+
                '</div>');
                data.appendTo($fruitZone);
		}
	}

	$(".price").click(function() {
		$(this).children(".sort-img").hide();
		$(this).children(".sort-img2").show();
		$(this).children(".sort-img2").toggleClass("img3");
	});
	
	$(".classifyrt-text").click(function() {
		$(this).addClass("tcolor-yellow");
		$(this).siblings(".classifyrt-text").removeClass("tcolor-yellow");
	});
</script>
</body>
</html>